<template>
    <div>
        <!-- 菜单管理 -->
        <!-- 面包屑 -->
        <el-bread></el-bread>

        <el-button class="addBtn" type="primary" plain size="small" @click="addMenu">添加</el-button>
        <!-- 弹窗 -->
        <v-dialog ref="diaLog" :isShow="isShow" :isAdd="isAdd" @cancel="cancel" @add="add"></v-dialog>
        <!-- 表格 -->
        <v-list @isShow="edit"></v-list>
    </div>
</template>
<script>
// 引入封装的表格
import vList from './list.vue';
// 引入封装好的弹窗
import vDialog from './dialog.vue';
export default {
    data() {
        return {
            isShow: false,//弹窗的状态值
            isAdd: true,//是否添加
        }
    },
    methods: {
        // 点击取消关闭弹窗
        cancel(isShow) {
            this.isShow = isShow;
        },
        // 点击确定关闭弹窗
        add(isShow) {
            this.isShow = isShow;
        },

        // 菜单添加
        addMenu() {
            // 弹出弹窗
            this.isShow = true;
            this.isAdd = true;

        },
        // 修改
        edit(id) {
            // console.log(id);
            // 弹出弹窗
            this.isShow = true;
            this.isAdd = false;
            // 通过ref属性  父组件调用子组件的方法
            this.$refs.diaLog.menuinfo(id);


        }
    },
    mounted() {

    },
    watch: {},
    computed: {

    },
    filters: {},
    components: {
        vList, vDialog
    },
}
</script>
<style scoped>
.addBtn {
    /* margin-top: 20px; */
    margin: 20px 0 5px 0;
}
</style>